<template>
  <div class="evaluation">
    <span class="eval_title">用户评价</span>
    <ul>
      <li v-for="(item,index) in evalist" :key="index">
        <div class="eval_info">
          <img :src="item.headimg" alt>
          <p>{{item.name}}</p>
        </div>
        <p class="eval_text">{{item.text}}</p>
        <div class="eval_pics">
          <span v-for="(picitem,key) in item.piclist" :key="key">
            <img :src="picitem.url" alt @click="priview(index,key)" mode="widthFix">
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue'
import { ImagePreview } from 'vant'

Vue.use(ImagePreview)

export default {
  name: 'Evaluation',
  data() {
    return {
      evalist: [
        {
          name: 'Joker',
          headimg:
            'http://sucai.suoluomei.cn/sucai_zs/images/20190514144414-user2.png',
          text:
            '实力推荐禾葡兰这款雪肤试用装，用起来很舒服，而且乳也不会油腻，不说了我要去买正装了。',
          piclist: [
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190514144504-img10.jpg',
            },
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190514144504-img09.jpg',
            },
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190514144505-img11.jpg',
            },
          ],
        },
        {
          name: 'Lara',
          headimg:
            'http://sucai.suoluomei.cn/sucai_zs/images/20190515134857-user4.jpg',
          text:
            '遇到一款好用的防晒霜真心不容易，偶然间兑换了这个防护乳，用起来非常舒服，还不油，心动不如行动呀。',
          piclist: [
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190515120033-img16.jpg',
            },
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190515120030-img15.jpg',
            },
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190515120035-img17.jpg',
            },
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190515120037-img18.jpg',
            },
          ],
        },
        {
          name: '拂晓',
          headimg:
            'http://sucai.suoluomei.cn/sucai_zs/images/20190514144420-user3.png',
          text:
            '来说说领取的这款试用装的心得；洁面乳很好用，而且还有淡淡的香味哦，柔肤水用起来也是非常的清爽，补水效果绝了，精华乳也是很好吸收，还不油腻，晚霜也是用起来非常舒服，一点都不油腻，总的来说这些产品用下来很舒服，已经勾引起我想要买的欲望了。',
          piclist: [
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190514144454-img04.jpg',
            },
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190514144456-img07.jpg',
            },
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190514144455-img05.jpg',
            },
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190514144456-img08.jpg',
            },
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190514144455-img06.jpg',
            }
          ],
        },
        {
          name: '海媚',
          headimg:
            'http://sucai.suoluomei.cn/sucai_zs/images/20190514144414-user1.png',
          text:
            '推荐推荐好物一定要推荐，这款防护乳真的非常好用啊，用了非常清爽。',
          piclist: [
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190514144436-img01.jpg',
            },
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190514144438-img02.jpg',
            },
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190514144440-img03.jpg',
            },
          ],
        },
        {
          name: 'KaKa',
          headimg:
            'http://sucai.suoluomei.cn/sucai_zs/images/20190515134901-user5.png',
          text:
            '推荐一款的非常好用的防护乳，开始只是想试试没想到就爱上了，真心好用还不油腻。',
          piclist: [
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190515120014-img12.jpg',
            },
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190515120545-img13.jpg',
            },
            {
              url:
                'http://sucai.suoluomei.cn/sucai_zs/images/20190515120027-img14.jpg',
            },
          ],
        },
      ],

      realpiclist: [],
    }
  },
  methods: {
    priview(index, key) {
      const that = this
      for (let i = 0; i < that.evalist[index].piclist.length; i++) {
        that.realpiclist.push(that.evalist[index].piclist[i].url)
      }
      // console.log(this.realpiclist)
      ImagePreview({
        images: that.realpiclist,
        startPosition: key,
        onClose: function() {
          that.realpiclist = []
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
.evaluation {
  margin: 0 10px;
  padding: 20px 0px;
  text-align: center;
  .eval_title {
    font-weight: 600;
    font-size: 18px;
    border-bottom: 2px black solid;
  }
  ul {
    li {
      width: 100%;
      margin-top: 20px;
      .eval_info {
        display: flex;
        width: 100%;
        height: 50px;
        flex-direction: row;
        align-items: center;
        img {
          border-radius: 50%;
          height: 40px;
          width: 40px;
          margin-right: 8px;
        }
        p {
          font-size: 16px;
          font-weight: 600;
        }
      }
      .eval_text {
        font-weight: 400;
        text-align: left;
        line-height: 20px;
        margin-bottom: 10px;
      }
      .eval_pics {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        span {
          width: 32%;
          height: 110px;
          margin-bottom: 10px;
          margin-right: 2%;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          img {
            width: 100%;
          }
        }
        span:nth-child(3n) {
          margin-right: 0px;
        }
      }
    }
  }
}
</style>
